<template>
  <el-dialog
    v-el-drag-dialog
    title="设置角色权限"
    :visible.sync="visible"
    width="500px"
    class="dialog"
    @closed="reset"
  >
    <el-table
      ref="tableRef"
      v-loading="$loadingPlugin.fetchData"
      class="permission-table"
      row-key="menuId"
      default-expand-all
      element-loading-text="加载中"
      max-height="600"
      :data="tableData"
    >
      <el-table-column label="功能权限">
        <template slot-scope="{ row }">
          <el-checkbox v-model="row.checked" :disabled="row.disabled" @change="v => checkChange(v, row)">{{ row.text }}</el-checkbox>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">
        取消
      </el-button>
      <el-button :loading="$loadingPlugin.success" type="primary" @click="success">
        确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { moduleMenuQueryList, saveRolePermissonByApp } from '@/api'

  export default {
    name: 'SetPermissionByApp',
    data() {
      return {
        visible: false,
        role: null,
        tableData: [
          { id: 'optionScope_0', text: '不允许新建客户', checked: false, disabled: false },
          { id: 'optionScope_1', text: '只允许新建居民客户', checked: false, disabled: false },
          { id: 'optionScope_2', text: '回气量必输', checked: false, disabled: false },
          { id: 'optionScope_3', text: '实收金额必输', checked: false, disabled: false },
          { id: 'optionScope_5', text: '不允许修改已有客户信息', checked: false, disabled: false },
          { id: 'optionScope_6', text: '启用库存', checked: false, disabled: false },
          { id: 'optionScope_7', text: '不允许退单', checked: false, disabled: false },
          { id: 'optionScope_8', text: '不允许领单', checked: false, disabled: false },
          { id: 'optionScope_9', text: '安检单签字不用必填', checked: false, disabled: false },
          { id: 'optionScope_10', text: '关闭代客下单', checked: false, disabled: false },
          { id: 'optionScope_11', text: '启用数据采集', checked: false, disabled: false },
          { id: 'optionScope_12', text: '启用投诉功能', checked: false, disabled: false },
          { id: 'optionScope_13', text: '启用退单处理', checked: false, disabled: false },
          { id: 'optionScope_14', text: '不允许转派', checked: false, disabled: false },
          { id: 'optionScope_15', text: '代客下单不允许修改单价', checked: false, disabled: false },
          { id: 'optionScope_16', text: '代客下单不允许使用特别价格(只支持挂牌价)', checked: false, disabled: false },
          { id: 'optionScope_17', text: '签收时随单送红包(仅限微信支付)', checked: false, disabled: false },
          { id: 'optionScope2_0', text: '启用运气到家数据隔离', checked: false, disabled: false },
          { id: 'optionScope2_2', text: '启用我的赏金', checked: false, disabled: false },
          { id: 'optionScope2_3', text: '允许同一钢瓶重复扫码', checked: false, disabled: false },
          { id: 'optionScope2_4', text: '签收允许商品退残', checked: false, disabled: false },
          { id: 'optionScope2_5', text: '启用安检统计', checked: false, disabled: false },
          { id: 'optionScope2_6', text: '启用客户资料图片补录', checked: false, disabled: false },
          { id: 'optionScope_4', text: '启动安检', checked: false, disabled: false },
          { id: 'optionScope2_8', text: '每单必须安检', checked: false, disabled: false },
          { id: 'optionScope2_9', text: '超期必须安检', checked: false, disabled: false },
          { id: 'optionScope2_10', text: '强制签收拍照', checked: false, disabled: false },
          { id: 'optionScope2_11', text: '直配销售', checked: false, disabled: false },
          { id: 'optionScope2_12', text: '自提销售', checked: false, disabled: false },
          { id: 'optionScope2_13', text: '启用批量派单', checked: false, disabled: false }
        ]
      }
    },
    methods: {
      open(role) {
        this.visible = true
        this.role = role
        this.fetchData(role.id)
      },
      async fetchData() {
        const res = await moduleMenuQueryList({
          roleId: this.role.roleId,
          roleType: this.role.roleType
        })
        const copy = JSON.parse(JSON.stringify(this.tableData))
        copy.forEach(item => {
          const id = item.id
          const scope = id.split('_')[0]
          const index = id.split('_')[1] * 1
          const checked = (res.data[scope] || 0) >> index & 0x01
          if (checked) {
            item.checked = true
          }
        })
        this.$set(this, 'tableData', copy)
      },
      checkChange(value, row) {
        if (row.id === 'optionScope2_8') { // 每单必须安检
          if (value) { // 如果勾选, 则超期必须安检不选
            const match = this.tableData.find(item => item.id === 'optionScope2_9')
            const index = this.tableData.findIndex(item => item.id === 'optionScope2_9')
            this.tableData.splice(index, 1, { ...match, checked: false })
          }
        } else if (row.id === 'optionScope2_9') { // 超期必须安检
          if (value) { // 如果勾选，则自提销售不选
            const match = this.tableData.find(item => item.id === 'optionScope2_8')
            const index = this.tableData.findIndex(item => item.id === 'optionScope2_8')
            this.tableData.splice(index, 1, { ...match, checked: false })
          }
        }
        if (row.id === 'optionScope_6') { // 启用库存
          const match1 = this.tableData.find(item => item.id === 'optionScope2_11')
          const index1 = this.tableData.findIndex(item => item.id === 'optionScope2_11')
          const match2 = this.tableData.find(item => item.id === 'optionScope2_12')
          const index2 = this.tableData.findIndex(item => item.id === 'optionScope2_12')
          if (!value) { // 如果不勾选，则直配销售、直配销售都不可选
            this.tableData.splice(index1, 1, { ...match1, disabled: true, checked: false })
            this.tableData.splice(index2, 1, { ...match2, disabled: true, checked: false })
          } else {
            this.tableData.splice(index1, 1, { ...match1, disabled: false })
            this.tableData.splice(index2, 1, { ...match2, disabled: false })
          }
        }
        if (row.id === 'optionScope2_11') { // 超期必须安检
          if (value) { // 如果勾选，则自提销售不选
            const match = this.tableData.find(item => item.id === 'optionScope2_12')
            const index = this.tableData.findIndex(item => item.id === 'optionScope2_12')
            this.tableData.splice(index, 1, { ...match, checked: false })
          }
        } else if (row.id === 'optionScope2_12') { // 直配销售
          if (value) { // 如果勾选，则每单必须安检不选
            const match = this.tableData.find(item => item.id === 'optionScope2_11')
            const index = this.tableData.findIndex(item => item.id === 'optionScope2_11')
            this.tableData.splice(index, 1, { ...match, checked: false })
          }
        }
      },
      async success() {
        let optionScope = 0
        let optionScope2 = 0
        this.tableData.filter(it => it.checked).forEach(item => {
          const id = item.id
          const scope = id.split('_')[0]
          const index = id.split('_')[1] * 1
          if (scope === 'optionScope') {
            optionScope += 1 << index
          } else {
            optionScope2 += 1 << index
          }
        })
        await saveRolePermissonByApp({
          roleId: this.role.roleId,
          optionScope: optionScope,
          optionScope2: optionScope2
        })
        this.visible = false
        this.$notify({
          title: '提示',
          message: '设置成功',
          type: 'success',
          duration: 2000
        })
      },
      reset() {
        this.role = null
        this.tableData = [
          { id: 'optionScope_0', text: '不允许新建客户', checked: false, disabled: false },
          { id: 'optionScope_1', text: '只允许新建居民客户', checked: false, disabled: false },
          { id: 'optionScope_2', text: '回气量必输', checked: false, disabled: false },
          { id: 'optionScope_3', text: '实收金额必输', checked: false, disabled: false },
          { id: 'optionScope_5', text: '不允许修改已有客户信息', checked: false, disabled: false },
          { id: 'optionScope_6', text: '启用库存', checked: false, disabled: false },
          { id: 'optionScope_7', text: '不允许退单', checked: false, disabled: false },
          { id: 'optionScope_8', text: '不允许领单', checked: false, disabled: false },
          { id: 'optionScope_9', text: '安检单签字不用必填', checked: false, disabled: false },
          { id: 'optionScope_10', text: '关闭代客下单', checked: false, disabled: false },
          { id: 'optionScope_11', text: '启用数据采集', checked: false, disabled: false },
          { id: 'optionScope_12', text: '启用投诉功能', checked: false, disabled: false },
          { id: 'optionScope_13', text: '启用退单处理', checked: false, disabled: false },
          { id: 'optionScope_14', text: '不允许转派', checked: false, disabled: false },
          { id: 'optionScope_15', text: '代客下单不允许修改单价', checked: false, disabled: false },
          { id: 'optionScope_16', text: '代客下单不允许使用特别价格(只支持挂牌价)', checked: false, disabled: false },
          { id: 'optionScope_17', text: '签收时随单送红包(仅限微信支付)', checked: false, disabled: false },
          { id: 'optionScope2_0', text: '启用运气到家数据隔离', checked: false, disabled: false },
          { id: 'optionScope2_2', text: '启用我的赏金', checked: false, disabled: false },
          { id: 'optionScope2_3', text: '允许同一钢瓶重复扫码', checked: false, disabled: false },
          { id: 'optionScope2_4', text: '签收允许商品退残', checked: false, disabled: false },
          { id: 'optionScope2_5', text: '启用安检统计', checked: false, disabled: false },
          { id: 'optionScope2_6', text: '启用客户资料图片补录', checked: false, disabled: false },
          { id: 'optionScope_4', text: '启动安检', checked: false, disabled: false },
          { id: 'optionScope2_8', text: '每单必须安检', checked: false, disabled: false },
          { id: 'optionScope2_9', text: '超期必须安检', checked: false, disabled: false },
          { id: 'optionScope2_10', text: '强制签收拍照', checked: false, disabled: false },
          { id: 'optionScope2_11', text: '直配销售', checked: false, disabled: false },
          { id: 'optionScope2_12', text: '自提销售', checked: false, disabled: false },
          { id: 'optionScope2_13', text: '启用批量派单', checked: false, disabled: false }
        ]
      }
    }
  }
</script>

<style scoped>

</style>
